<template>
	<view class="emoji-wrapper">
		<view class="emoji-content">
			<swiper indicator-dots="true" class="emoji-content-swiper">
				<block>
					<view style="display: inline-block;" v-for="(currentEmojiArr, index) in currentAlbumKeys" :key="index" >
						<swiper-item>
							<view class="emoji-content-item" v-for="(currentEmojiKey, indexs) in currentEmojiArr" :key="currentEmojiKey">
								<image
									:src="emojiList[currentAlbum][currentEmojiKey].img"
									:class="currentAlbum == 'emoji' ? 'emoji-content-img-emoji' : 'emoji-content-img-other'"
									@click="emojiTap(currentEmojiKey)"
								></image>
							</view>
						</swiper-item>
					</view>
				</block>
			</swiper>
		</view>
		<view class="emoji-album ">
			<!-- <view class='emoji-album-left' wx:for="{{albumArr}}" wx:for-item="album" wx:key="{{album.album}}" data-album="{{album.album}}" bindtap='switchAlbum'>
	      <image src='{{album.img}}' class='{{album.album == currentAlbum ? "emoji-album-left-img album-active" : "emoji-album-left-img"}}'></image> 
	    </view>  -->
			<view class="emoji-album-left" v-for="(album, index) in albumArr" :key="album.album"  @click="switchAlbum(album.album)">
				<image :src="localAlbumImages[index]" :class="album.album == currentAlbum ? 'emoji-album-left-img album-active' : 'emoji-album-left-img'"></image>
			</view>
			<view class="emoji-send" @click="emojiSend">发送</view>
		</view>
	</view>
</template>

<script>
import EmojiObj from '@/utils-im/emojimap.js';
export default {
	data() {
		return {
			localAlbumImages: ['http://k8s.vendingtech.vip/images/album-emoji.png', 'http://k8s.vendingtech.vip/images/album-ajtd.png', 'http://k8s.vendingtech.vip/images/album-xxy.png', 'http://k8s.vendingtech.vip/images/album-lt.png'],
			albumArr: [],
			currentAlbum: 'emoji',
			emojiList: {},
			currentAlbumKeys: [] //存储每一类别的key
		};
	},
	onLoad(option) {},
	onReady() {
		let currentAlbumKeys = this.splitAlbumKeys(Object.keys(EmojiObj.emojiList[this.currentAlbum]), this.currentAlbum == 'emoji' ? 23 : 10);

		this.albumArr = EmojiObj.albumArr;
		this.emojiList = EmojiObj.emojiList;
		this.currentAlbumKeys = currentAlbumKeys;

	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		/**
		 * 切换emoji类别
		 */
		switchAlbum(e) {
			this.currentAlbum = e;
			let currentAlbumKeys = this.splitAlbumKeys(Object.keys(this.emojiList[this.currentAlbum]), this.currentAlbum == 'emoji' ? 23 : 10, this.currentAlbum);

			this.currentAlbumKeys = currentAlbumKeys;
		},
		/**
		 * 每页显示固定个数
		 * arr数据源数组，space每个数组最大容量
		 * [[], [], []]
		 */
		splitAlbumKeys(arr, space, currentAlbum) {
			const delta = space || 23;
			let result = [],
				factor = Math.ceil(arr.length / delta),
				begin = 0,
				end = 1;
			if (factor == 1) {
				result = [[...arr]];
			} else {
				for (let i = 1; i < factor; i++) {
					let temp = [];
					temp = [...arr.slice(begin, i * delta)];
					begin = i * delta;
					result.push(temp);
				}
				result.push([...arr.slice(delta * (factor - 1), arr.length)]);
			}
			if (currentAlbum == 'emoji' || this.currentAlbum == 'emoji') {
				// 只有emoji才添加删除按钮
				result.map((cata, index) => {
					if (index != result.length - 1) {
						cata.push('[删除]');
					}
				});
				// console.log(result)
			}
			return result;
		},
		/**
		 * 单击emoji
		 */
		emojiTap(emoji) {
			
			if (!emoji) return;
			// console.log(emoji)
			this.$emit('EmojiClick', emoji);
		},
		/**
		 * 发送emoji
		 */
		emojiSend() {
			this.$emit('EmojiSend');
		}
	}
};
</script>

<style lang="less">
.emoji-wrapper {
	width: 100%;
	height: 100%;
	background-color: #fff;
}
/*内容  */
.emoji-content {
	width: 100%;
	height: 400rpx;
	/* padding-top: 30rpx; */
	padding-left: 20rpx;
	box-sizing: border-box;
}
.emoji-content-swiper {
	width: 100%;
	height: 100%;
}
.emoji-content-item {
	display: inline-block;
	margin: 17rpx;
}
.emoji-content-img-emoji {
	width: 56rpx;
	height: 56rpx;
}
.emoji-content-img-other {
	width: 100rpx;
	height: 100rpx;
}
/*底部类别  */
.emoji-album {
	width: 100%;
	height: 88rpx;
	border: 2rpx solid #999;
	box-sizing: border-box;
	background-color: #fff;
}
.emoji-album-left {
	display: inline-block;
	height: 100%;
}
.emoji-album-left-img {
	width: 88rpx;
	height: 100%;
	padding: 8rpx 10rpx;
	box-sizing: border-box;
	border-right: 2rpx soild #999;
}
.emoji-send {
	width: 88rpx;
	height: 100%;
	line-height: 88rpx;
	background-color: #0091e4;
	text-align: center;
	float: right;
	color: #fff;
}
.album-active {
	background-color: #aaa;
}
</style>
